﻿@using ZBJF.Warranty.Common.Enums.InsuranceWarranty
@using ZBJF.Warranty.WebProvider
@using ZBJF.Warranty.Common.Enums
@{
    ViewBag.Title = "呼叫中心列表";
}
@section Header{
    @Scripts.Render("~/bundles/datatable")
    @Styles.Render("~/Content/datatable")
}
@model ZBJF.Warranty.Model.Udesk_CallRecord
<ul class="nav nav-tabs">
    <li class="active"><a>呼叫中心列表</a></li>
</ul>
<table style="margin: 20px;">
    <tr>
        <td>客户名称:</td>
        <td>@Html.TextBoxFor(n => n.User_name, new { @class = "input-small" })</td>
        <td>客服名称:</td>
        <td>@Html.TextBoxFor(n => n.Agent_nick_name, new { @class = "input-small" })</td>
        <td>通话开始时间:</td>
        <td>
            @Html.TextBox("Call_start_atStart", "", new { @class = "Wdate input-small", onclick = "WdatePicker()" })
            @Html.TextBox("Call_start_atEnd", "", new { @class = "Wdate input-small", onclick = "WdatePicker()" })
        </td>
        <td>
                <input class="btn btn-primary" type="button" value="查询" onclick="search();" />
        </td>
    </tr>
</table>

<div class="table-responsive dataTables_wrapper">
    <table id="callRecordList" class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th width="20">序号</th>
                <th width="100">客户名称</th>
                <th width="80">排队状态</th>
                <th width="80">客服名称</th>
                <th width="80">设备状态</th>
                <th width="100">通话类型</th>
                <th width="80">通话来源</th>
                <th width="80">通话结果</th>
                <th width="80">通话开始时间</th>
                <th width="80">录音</th>
                <th width="100">操作</th>
            </tr>
        </thead>
    </table>
</div>
@section scripts{
<script src="~/Content/js/moment.js"></script>
    @Scripts.Render("~/Bundles/ImagePreview")
    <script type="text/javascript">
        var indexs;
        window.onload = function() {
            $("#shows").hide();
        }
        var isSearch = false;
        $(function() {
            var objTable = $("#callRecordList")
                .dataTable({
                    fnDrawCallback: function() {
                        ControlPermissionOperate();
                    },
                    "sAjaxSource": "/Udesk/CallRecord",
                    aoColumns: [
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function(nRow) {
                                return nRow.iDataRow + 1;
                            }
                        },
                        { "mData": "User_name" },
                        { "mData": "Queue_type" },
                        { "mData": "Agent_nick_name" },
                        { "mData": "Device_info" },
                        { "mData": "Call_type" },
                        { "mData": "Call_source" },
                        { "mData": "Call_result" },
                        {
                            "mData": "Call_start_at",
                            "fnRender": function(nRow) {
                                return moment(nRow.aData.Call_start_at).format('YYYY-MM-DD HH:mm:ss');
                            }
                        },
                         {
                             "mData": null,
                             "fnRender": function (nRow) {
                                 var name = nRow.aData.Record_url==""?"":"播放录音";
                                 return "<a href='" + nRow.aData.Record_url + "'>"+name+"</a>";
                             }
                         },
                        { "mData": null, "bSortable": false}
                    ],
                    "fnRowCallback": function(nRow, aData, iDisplayIndex) {                       
                        var html = "<a class='Edit-R' href='/Udesk/CallRecordDetails/" + aData.ID + "' title='详情'>详情页面</a>";
                        $('td:eq(10)', nRow).html(html);
                    }
                });
            imgPreview();
        });
        function imgPreview() {
            setTimeout(function() { $("img.preview").preview(); }, 500);
        }
        function search() {
            queryParamList.User_name = $("#User_name").val().trim();
            queryParamList.Agent_nick_name = $("#Agent_nick_name").val().trim();
            queryParamList.Call_start_atStart = $("#Call_start_atStart").val();
            queryParamList.Call_start_atEnd = $("#Call_start_atEnd").val();
            $("#callRecordList").dataTable().fnDraw();
        }
    </script>
}